/* Importación de fuente de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .smooth-scroll {
        animation: none !important;
        transition: none !important;
    }
}

body {
    line-height: 1.6;
    color: #000;
    background-color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background-color: rgba(46, 46, 46, 0.9);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.05);
}

#logo img {
    max-width: 50%;
    height: auto;
    max-height: 80px;
}

/* Estilos para el menú hamburguesa */
.menu-toggle {
    display: none;
    /* Oculto por defecto en desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #000;
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* Navegación */
.nav-menu ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-menu li {
    margin: 0.5rem;
}

.nav-menu a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-family: 'Roboto Condensed', sans-serif;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
    background-color: #24b5ee;
}

.nav-menu a[aria-label="Tienda online de autopartes"] {
    position: relative;
    padding: 0.5rem 1rem;
    border: 2px solid #24b5ee;
    background-color: #24b5ee;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-menu a[aria-label="Tienda online de autopartes"]:hover {
    background-color: #118bbb;
    color: white;
    border-color: transparent;
}

/* Main content */
main {
    padding-top: 80px;
    /* Compensa el header fijo */
    max-width: 1200px;
    margin: 0 auto;
}

section {
    margin-bottom: 3rem;
    padding: 0 1rem;
}

h1,
h2,
h3 {
    margin-bottom: 1rem;
    color: #000;
    font-family: 'Roboto Condensed', sans-serif;
}

p {
    margin-bottom: 1rem;
    font-family: 'Roboto Condensed', sans-serif;
}

/* Estilos para la sección home */
#home {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    left: 0;
    padding: 0;
    margin-top: 10px;
    min-height: 100vh;
}


/* Sección de cuadros full width */
.cuadros-fullwidth {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cuadro-fw {
    position: relative;
    width: 33.333%;
    min-height: 400px;
    overflow: hidden;
}

.cuadro-fw2 {
    position: relative;
    width: 20%;
    min-height: 270px;
    max-height: 300px;
    overflow: hidden;
}

.cuadro-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.cuadro-imagen2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.cuadro-contenido {
    margin-top: auto;
    position: relative;
    z-index: 10;
    color: white;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.cuadro-fw:hover .cuadro-contenido {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.02);
}

.cuadro-fw2:hover .cuadro-contenido {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.02);
}

.cuadro-contenido h2 {
    position: top;
    font-size: 2rem;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.562);
    text-shadow: 1px 1px 3px rgb(255, 255, 255);
}

.cuadro-contenido p {
    margin-top: auto;
    position: relative;
    font-size: 1.2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Contenedor interno para el resto del contenido */
.home-contenido {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Sección medios de pago */
.medios-de-pago {
    margin: 40px auto;
    text-align: center;
    padding: 0 20px;
    max-width: 1200px;
}

.medios-de-pago h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #333;
}

.medios-pago-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.medio-pago {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20vh;
}

.medio-pago img {
    width: 8vh;
    height: 8vh;
    object-fit: contain;
    margin-bottom: 10px;
}

.medio-pago img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 20%;
    transition: transform 0.3s ease;
}

.medio-pago p {
    font-weight: bold;
    color: #555;
}

/* Sección dedicación */
.dedicacion {
    background-color: #f5f5f5;
    border-radius: 8px;
    margin: 5vh auto;
    text-align: center;
    max-width: 100vh;
}

.dedicacion h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: -2vh;
}

.dedicacion p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

a.linkedin {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

a.linkedin:hover {
    opacity: 0.8;
    text-decoration: underline;
}



/* Responsive Design */
@media (max-width: 1024px) {
    .cuadro-fw {
        width: 50%;
    }

    .cuadro-fw:last-child {
        width: 100%;
    }

    .cuadro-fw2 {
        width: 50%;
    }

    .cuadro-fw2:last-child {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cuadro-fw {
        width: 100%;
        min-height: 300px;
    }

    .cuadro-contenido h2 {
        font-size: 1.8rem;
    }

    .cuadro-fw2 {
        width: 100%;
        min-height: 300px;
    }

    .cuadro-contenido p {
        font-size: 1.1rem;
    }

    .medios-pago-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .medio-pago {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cuadro-fw {
        min-height: 250px;
    }

    .cuadro-fw2 {
        min-height: 250px;
    }

    .cuadro-contenido {
        padding: 20px;
    }

    .cuadro-contenido h2 {
        font-size: 1.5rem;
    }

    .medios-de-pago h2,
    .dedicacion h2 {
        font-size: 1.5rem;
    }

    .dedicacion p {
        font-size: 1rem;
        margin-top: 1vh;
    }
}

/*================================*/

/* Contenido del home (sobre el carrusel) */
#destacamos .dedicacion {
    position: absolute;
    margin-top: 15vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Marcas de autos - Centrado */
#marcas-autos {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

/* ESTILOS PARA MARCAS DE AUTOS - LOGOS CIRCULARES */
#marcas-autos ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    list-style-position: inside;
    margin-top: 1rem;
    justify-items: center;
    text-align: left;
    list-style: none;
    padding: 0;
    gap: 12px;
    margin: 1.5rem 0;
}

#marcas-autos li {
    margin-bottom: 0.5rem;
    text-align: left;
    width: fit-content;
    padding: 0.5rem;
}

#marcas-autos img {
    width: 100px;
    height: 100px;
    border-radius: 70%;
    size-adjust: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/*Animacion imagenes de marcas*/
#marcas-autos img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marcas-lista li {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.marcas-lista li.visible {
    opacity: 1;
    transform: translateY(0);
}

/*---------------------------------------*/

/* Sección destacamos - Centrado */
.destacamos {
    text-align: center;
}

/* CTA - Centrado */
.cta {
    background-color: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.cta a {
    color: #000;
    text-decoration: underline;
    font-weight: bold;
}

/* Lista de beneficios */
.check-list {
    list-style-type: none;
    text-align: left;
    display: inline-block;
}

.check-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.check-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #000;
}

/* Formulario de contacto */

#contacto {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Roboto Condensed', sans-serif;
}

button[type="submit"] {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto Condensed', sans-serif;
}

button[type="submit"]:hover {
    background-color: #333;
    color: #118bbb;
}


/* Datos de contacto y ubicacion */
#datos-contacto {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

#direccion,
#whatsapp,
#email {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#direccion a,
#whatsapp a,
#email a {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#direccion a:hover,
#whatsapp a:hover,
#email a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Icono de ubicación */
#direccion a {
    background-color: #ff5252;
}

#direccion a:hover {
    background-color: #d32f2f;
}

/* Icono de WhatsApp */
#whatsapp a {
    background-color: #25D366;
}

#whatsapp a:hover {
    background-color: #128C7E;
}

/* Icono de Email */
#email a {
    background-color: #4285F4;
}

#email a:hover {
    background-color: #3367D6;
}

/* Iconos SVG inline */
#direccion a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#whatsapp a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#email a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Texto debajo de los iconos */
#direccion div,
#whatsapp div,
#email div {
    text-align: center;
    color: #333;
    font-size: 0.9rem;
    max-width: 120px;
}

/* Responsive */
@media (max-width: 768px) {
    #datos-contacto {
        flex-direction: column;
        align-items: center;
    }
}

/* Mapa */
.mapa-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    margin-bottom: 1rem;
}

.mapa-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Footer */
footer {
    background-color: rgba(46, 46, 46, 0.9);
    padding: 2rem 1rem;
    max-height: 20rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1rem;
}

.footer-links {
    justify-self: start;
    text-align: left;
}

.logo-footer {
    justify-self: center;
    text-align: center;
    grid-row: span 2;
}

.copyright {
    color: #ffffff;
    grid-column: 2;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Estilos específicos para el contenido del footer */
.footer-links h3,
.redes-sociales h3 {
    color: #ffffff;
    margin-bottom: 1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    color: #87CEEB;
}

.logo-footer img {
    max-width: 50%;
    height: auto;
    margin-bottom: 0.5rem;
}

.redes-sociales {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.redes-sociales h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: #ffffff;
}

.redes-sociales a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    padding: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.redes-sociales a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Logo de Instagram */
.redes-sociales a[aria-label*="Instagram"] {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

/* Logo de Facebook */
.redes-sociales a[aria-label*="Facebook"] {
    background-color: #1877F2;
}

/* Iconos usando pseudo-elementos (opción sin imágenes) */
.redes-sociales a::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.redes-sociales a[aria-label*="Instagram"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.redes-sociales a[aria-label*="Facebook"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z'/%3E%3C/svg%3E");
}

/* Media queries para responsive */
@media (max-width: 767px) {
    .redes-sociales {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .nav-menu a[aria-label="Tienda online de autopartes"] {
        width: 90%;
        text-align: center;
        margin: 0.5rem auto;
    }

    .redes-sociales h3 {
        display: none;
    }
}

@media (min-width: 768px) {
    .redes-sociales {
        align-items: flex-end;
    }
}

/* Media Queries para responsive - Móviles */
@media (max-width: 767px) {

    /* Ajustes generales para móviles */
    body {
        padding-top: 0;
    }

    /* Header móvil */
    header {
        position: relative;
        height: auto;
        padding: 0.5rem 1rem;
        flex-direction: column;
    }

    #logo img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    /* Main content */
    main {
        padding-top: 0;
        margin-top: 0;
    }

    /* Carrusel móvil */
    #home {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #home .carrusel {
        height: 50vh;
        max-height: 50vh;
        margin-top: 0;
    }

    #home .dedicacion {
        position: relative;
        margin: 1rem auto;
        transform: none;
        left: auto;
        top: auto;
        width: 90%;
        padding: 1rem;
    }

    /* Secciones generales */
    section {
        margin-bottom: 2rem;
        padding: 0 1rem;
        clear: both;
    }



    /* Footer móvil */
    footer {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        max-height: none;
    }

    .footer-links,
    .redes-sociales,
    .logo-footer {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .logo-footer {
        order: -1;
    }

    .logo-footer img {
        max-width: 60%;
    }

    .copyright {
        margin-top: 1rem;
    }

    /* Formulario de contacto */
    #contacto {
        padding: 0 1rem;
    }

    /* Mapa */
    .mapa-container {
        margin: 1rem 0;
    }

    /* Evitar solapamiento de elementos flotantes */
    .dedicacion,
    .destacamos,
    .cta,
    #sobre-nosotros,
    #contacto {
        clear: both;
        margin: 1rem 0;
        padding: 1rem;
        width: 100%;
    }

    /* Menú de navegación móvil */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(57, 142, 175, 0.95);
        padding: 5rem 1rem 1rem;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nav-menu.active {
        transform: translateY(0);
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: center;
    }

    .nav-menu li {
        margin: 1rem 0;
        width: 100%;
        text-align: center;
    }

    .nav-menu a {
        display: block;
        padding: 1rem;
        font-size: 1.2rem;
    }

    /* Animación para el botón hamburguesa */
    .menu-toggle span {
        background-color: #fff;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (min-width: 768px) {
    #marcas-autos ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .dedicacion,
    .destacamos {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: start;
    }

    footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
        padding: 2rem;
    }

    .copyright {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (min-width: 1024px) {
    #marcas-autos ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Efectos hover para botones y enlaces */
a:hover,
button:hover {
    transition: all 0.3s ease;
}

button:hover {
    color: #118bbb;
}